<template>
    <el-card style="max-width: 100%">
        <template #header>
        <div class="card-header">
            <span>产品列表</span>
            <el-button 
                size="small" 
                type="primary" 
                @click="productAdd" 
                style="margin-left: 20px;"
                >
                添加产品
            </el-button>
        </div>
        </template>
        <el-table v-loading="loading" :data="products" style="width: 80%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="serial" label="规格" />
            <el-table-column prop="category_title" label="分类" />
            <el-table-column prop="addtime_format" label="更新时间" />
            <el-table-column label="操作">
                <template #default="scope">
                <el-button 
                    size="small" 
                    type="primary"  
                    @click="handleData(scope.$index, scope.row)"
                    >
                    编辑
                </el-button>
                <el-button 
                    size="small" 
                    type="primary"  
                    @click="handleFeature(scope.$index, scope.row)"
                    >
                    特征描述
                </el-button>
                <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.row.id)"
                    >
                    删除
                </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>


<script setup>
import {ref, onBeforeMount} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { productListApi, categoryApi, productAddApi, deleteProductApi } from '@/requests';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue';


const router = useRouter();
const loading = ref(false);
const products = ref();
const title = ref();

onBeforeMount(()=>{
    getProductList();
})
// 获取产品列表
const getProductList = async ()=>{
    loading.value = true;
    const res = await productListApi({"title": title.value});
    if (res.status === 2000){
        products.value = res.data;
    }else{
        ElMessage.error("获取产品列表失败")
    };
    loading.value = false;
};

// 添加产品
const productAdd = ()=>{
    router.push({path: "/data"});
};

// 删除
const handleDelete = async(id)=>{
    const res = await deleteProductApi({"id": id});
    if (res.status === 2000){
        getProductList();
        ElMessage.success("删除成功")
    }else{
        ElMessage.error("删除失败")
    };
};
// 修改特征
const handleFeature = (index, row)=>{
    router.push({path: '/feature', query: {id: row.id}});
};

// 修改产品
const handleData = (index, row)=>{
    router.push({path: "/data", query: {id: row.id}});
};

</script>